<template>
<div>
        <div>
<el-row :gutter="15">
  <el-col :span="8"><div  id="inputCheck" class="grid-content">
        <el-input placeholder="输入关键字"
                  v-model="input"
                  >
        </el-input></div>
    </el-col>
  <el-col :span="2"><div class="grid-content ">
      <el-button class="check" @click="clickCheck()">查询</el-button></div>
    </el-col>
  <el-col :span="12"><div class="grid-content "></div></el-col>
  <el-col :span="2"><div class="grid-content ">
      <el-button class="new"  @click="dialogVisibleNew = true">新建</el-button></div></el-col>
</el-row>
    </div>

  <el-table
    :data="tableData1"
    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="number"
                         label="序号"
                         >
        </el-table-column>
        <el-table-column prop="organizationName"
                         label="机构名称"
                        >
        </el-table-column>
        <el-table-column prop="contact"
                         label="联系人"
                         >
        </el-table-column>
         <el-table-column prop="mobile"
                         label="联系电话"
                         >
        </el-table-column>
        <el-table-column prop="createDate"
                         label="创建时间"
                        >
        </el-table-column>
        <el-table-column label="操作"
                         >
          <el-button type="text">删除</el-button>
           <el-button type="text"  @click="dialogVisibleEdit= true">编辑</el-button>
          <el-button type="text" @click="dialogVisibleCheck= true">查看</el-button>
        </el-table-column>
  </el-table>
  <!--新建对话框-->
      <el-dialog custom-class="self-dialog"
               title="新建"
               :visible.sync="dialogVisibleNew"
               width="30%"
               modal>
      <el-form :model="formNew"
               :rules="rules"
               ref="formNew"
               label-width="100px">
        <el-form-item label="机构名称"
                      prop="organizationName">
          <el-input v-model="formNew.organizationName"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人"
                      prop="contact">
          <el-input v-model="formNew.contact"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="mobile">
          <el-input v-model="formNew.mobile"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formNew');dialogVisibleNew=false"
                   plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formNew);dialogVisibleNew=false"
                   plain>确 定</el-button>

      </el-form>

    </el-dialog>
    <!-- 新建对话框 -->
     <!--编辑对话框-->
      <el-dialog custom-class="self-dialog"
               title="编辑"
               :visible.sync="dialogVisibleEdit"
               width="30%"
               modal>
      <el-form :model="formEdit"
               :rules="rules"
               ref="formEdit"
               label-width="100px">
        <el-form-item label="机构名称"
                      prop="organizationName">
          <el-input v-model="formEdit.organizationName"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人"
                      prop="contact">
          <el-input v-model="formEdit.contact"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="mobile">
          <el-input v-model="formEdit.mobile"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formEdit');dialogVisibleEdit=false"
                   plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formEdit);dialogVisibleEdit=false"
                   plain>确 定</el-button>

      </el-form>

    </el-dialog>
    <!-- 编辑对话框 -->
    <!--查看对话框-->
      <el-dialog custom-class="self-dialog"
               title="查看"
               :visible.sync="dialogVisibleCheck"
               width="30%"
               modal>
      <el-form :model="formCheck"
               :rules="rules"
               ref="formCheck"
               label-width="100px">
        <el-form-item label="机构名称"
                      prop="organizationName">
          <el-input v-model="formCheck.organizationName"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人"
                      prop="contact">
          <el-input v-model="formCheck.contact"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="mobile">
          <el-input v-model="formCheck.mobile"
                    placeholder="单行输入"></el-input>
        </el-form-item>
        <el-button @click="clickReset('formCheck');dialogVisibleCheck=false"
                   plain>取 消</el-button>
        <el-button @click="clickAddConfirm(formCheck);dialogVisibleCheck=false"
                   plain>确 定</el-button>

      </el-form>

    </el-dialog>
    <!-- 查看对话框 -->
</div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisibleNew: false,
      dialogVisibleEdit: false,
      dialogVisibleCheck: false,
      formNew: {
        organizationName: '柳北区教育局',
        contact: '张三',
        mobile: '15862354265'
      },
      formEdit: {
        organizationName: '柳北区教育局',
        contact: '张三',
        mobile: '15862354265'
      },
      formCheck: {
        organizationName: '柳北区教育局',
        contact: '张三',
        mobile: '15862354265',
        createDate: '2020-05-09 16:57:21'
      },
      tableData1: [{
        id: 1,
        number: '1',
        organizationName: '柳北区教育局',
        contact: '张三',
        mobile: '15862354265',
        createDate: '2020-05-09 16:57:21',
        hasChildren: true
      }, {
        id: 2,
        number: '2',
        organizationName: '柳北区教育局',
        contact: '张三',
        mobile: '15862354265',
        createDate: '2020-05-09 16:57:21'
      }],
      input: '',
      rules: {
        organizationName: [
          { required: true, message: '请输机构名称', trigger: 'blur' }

        ],
        contact: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          { min: 2, max: 11, message: '长度为2-11个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输手机号', trigger: 'blur' }

        ]

      }
    }
  },
  // 初始化显示所有用户
  created () {
    this.init()
  },
  methods: {
    load (tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 11,

            organizationName: '柳北区第一中学',
            contact: '张三',
            mobile: '15862354265',
            createDate: '2020-05-09 16:57:21'
          }, {
            id: 12,
            organizationName: '柳北区第二中学',
            contact: '张三',
            mobile: '15862354265',
            createDate: '2020-05-09 16:57:21'
          }
        ])
      }, 1000)
    },
    // 显示所有用户
    init () {
      const _this = this
      this.$axios.get('/user/findAll').then(function (resp) {
        // console.log(resp);
        _this.user = resp.data.data
      })
    },
    // 根据关键字查询
    clickCheck () {

    },
    // 增加预案
    clickAddConfirm (form) {
      console.log(form)
      const _this = this
      this.$axios.post('/user/add',
        // 法1:
        form
        /* 法2：{
           planName: form.planName,
           manager: form.manager
         }

        */
      ).then(function (resp) {
        console.log(resp)
        _this.init()
      })
    },
    // 编辑预案
    clickEdit (id) {
      const _this = this
      this.$axios.get('/user/findById/?userId=' + id).then(function (resp) {
        _this.formEdit.planName = resp.data.data.planName
        _this.formEdit.manager = resp.data.data.manager
        _this.formEdit.createDate = resp.data.data.createDate

        console.log(resp)
      })
    },
    // 编辑表单里的确定按钮
    clickEditConfirm (form) {
      console.log(form)
      const _this = this
      this.$axios.post('/user/update',
        // 法1：
        form
        /* 法2：
        {
          userId: form.userId,
          mobile: form.mobile,
        })
        法2 */
      ).then(function (resp) {
        console.log(resp)
        _this.init()
      })
    },
    // 新增表单和编辑表单的取消操作
    clickReset (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>
 #inputCheck{
 .el-input__inner {
  margin: 0;
  padding: 0;
  width: 400px;
}
.el-input--suffix ,.el-input__inner {
    padding-right: 0px;
}
.el-input ,.el-input--suffix {
    margin:0;
    width: 40%;
    float:left;
    position: relative;
}
.input_{
    position: relative;
    left:0px;

}
}

.el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}
.el-table::before {
  /* 去除下边框 */
  height: 0;
}
.el-table__row > td {
  /* 去除表格线 */
  border: none;
}
.el-table td,
.el-table th {
  text-align: center!important;
}
html,body{
    margin:0;
    padding:0;
}
.check{
    float: left;
    position: relative;
}
.new{
    float: right;
    position: relative;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
